import React, { Component } from 'react'
/**
 * 卸载阶段的生命周期的函数
 * componentWillUnMount:在组件销毁之前要执行
 * 1、清除定时器
 * 2、解除事件绑定
 */
export default class LifeCycle3 extends Component {
  constructor(){
    super()
    this.state={
        count:0
    }
  }

  handle=()=>{
    console.log('--------------单击事件----------------');
  }
  componentDidMount(){
    this.timer=window.setInterval(() => {
        this.setState({count:this.state.count+1})
        console.log('-----------定时器正在运行中--------------');
    }, 1000);

    document.querySelector("#btn").addEventListener('click',this.handle)
  }
  componentWillUnmount(){
    console.log('----------componentWillUnmount---------------');
    window.clearInterval(this.timer)
    document.querySelector("#btn").removeEventListener('click',this.handle)
  }
  render() {
    return (
      <div>
         <h1>定时器</h1>
         <h2>{this.state.count}</h2>
         <button id='btn'>按钮</button>
      </div>
    )
  }
}
